<template>
    <van-nav-bar border fixed placeholder>
        <template #left>
            <slot>
                <div v-if="!noback" @clcik="goback">
                    <van-icon name="arrow-left" />
                    <span>返回</span>
                </div>
            </slot>
        </template>

        <template #title>
            <div class=" van-ellipsis">{{ title }}</div>
        </template>

        <template #right>
            <van-popover placement="bottom-end" theme="dark" :actions="actions" @select="selectAction">
                <template #reference>
                    <van-icon name="ellipsis" size="18" />
                </template>
            </van-popover>
        </template>

    </van-nav-bar>
</template>

<script setup lang="ts">
import { useCommon } from '../hooks/useCommon'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const { gotoOnePage, goback } = useCommon()
const actions = [
    { text: '首页', icon: "home-o", path: '/', disabled: route.path == '/' },
    { text: '订单', icon: 'orders-o', path: '/order', disabled: route.path == '/order' },
    { text: '个人中心', icon: 'friends-o', path: "/center", disabled: route.path == '/center' },
    { text: '登录', icon: 'user-o', path: '/login', disabled: route.path == '/login' },
    { text: '搜索', icon: 'search', path: '/search', disabled: route.path == '/search' },
];

const selectAction = (item:string) => {
    gotoOnePage(item.path)
}

defineProps({
    title: {
        type: String,
        default: '标题1'
    },
    noback: {
        type: Boolean,
        default: false,
    }
})
</script>

